<script setup lang="ts">
  import { PropType, ref } from 'vue'
  import CustomerAssociatedFiles from './CustomerAssociatedFiles.vue'
  import { Edit } from '@element-plus/icons-vue'
  import UpdateCustomerInfoModal from './UpdateCustomerInfoModal.vue'
  import { ElTooltip, ElIcon } from 'element-plus'

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'updata_detail'): void
  }>()

  // 更新公司信息弹窗显示状态
  const updateCustomerInfoModalVisible = ref(false)
</script>

<template>
  <div>
    <div class="order_detail_user_info">
      <div class="title">
        公司信息
        <template v-if="[1, 2, 3].includes(props.orderDetail.status)">
          <el-tooltip content="修改公司信息" placement="top" effect="light">
            <span
              v-permission="'order_updateCustomer'"
              style="
                display: flex;
                align-items: center;
                font-size: 12px;
                font-weight: normal;
                color: #007cff;
                cursor: pointer;
              "
              @click="updateCustomerInfoModalVisible = true"
            >
              <el-icon color="#007cff" size="16">
                <Edit />
              </el-icon>
              修改
            </span>
          </el-tooltip>
        </template>
      </div>
      <div class="info">
        <div class="info_item">
          <div class="label">客户名称:</div>
          <div class="value">
            <CustomerAssociatedFiles
              :order-id="props.orderDetail.id"
              :user-name="props.orderDetail.name"
            />
          </div>
        </div>
        <div class="info_item">
          <div class="label">客户电话:</div>
          <div class="value">
            {{ props.orderDetail.phone }}
          </div>
        </div>
        <div class="info_item">
          <div class="label sendLabel">报单公司:</div>
          <div class="value">
            {{ props.orderDetail.repairCompany }}
          </div>
        </div>
        <div class="info_item">
          <div class="label sendLabel">报单公司电话:</div>
          <div class="value">
            {{ props.orderDetail.repairCompanyPhone }}
          </div>
        </div>
        <div class="info_item">
          <div class="label sendLabel">报单人信息:</div>
          <div class="value">
            {{ props.orderDetail.sendForRepairUsername }}
          </div>
        </div>
        <div class="info_item">
          <div class="label sendLabel">报单人电话:</div>
          <div class="value">
            {{ props.orderDetail.sendForRepairPhone }}
          </div>
        </div>
      </div>
    </div>

    <update-customer-info-modal
      v-model:visible="updateCustomerInfoModalVisible"
      :order-detail="props.orderDetail"
      @update="emits('updata_detail')"
    />
  </div>
</template>

<style scoped lang="scss">
  .order_detail_user_info {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
      display: flex;
      align-items: center;
      column-gap: 4px;
    }

    .info {
      display: flex;
      flex-wrap: wrap;
      padding-left: 9px;
      column-gap: 64px;
      row-gap: 12px;

      .info_item {
        width: calc((100% - 64px) / 2);
        display: flex;
        gap: 5px;

        .label {
          white-space: nowrap;
          color: #606266;
          text-align: right;
        }
      }

      .contact_person {
        .value {
          display: flex;
          gap: 5px;
        }
      }
    }
  }
</style>
